<template>
	<div class="goos">
		<div class="div1">
			<aside>
				<i class="el-icon-s-data"><span>商品列表</span></i>
				<button><router-link to="/admin/goos"><i class="el-icon-refresh-right"></i></router-link></button>
			</aside>
			<hr/>
			<button><router-link to="/admin/editgoos">添加新的商品</router-link></button>
		</div>
		<div class="div2">
			<el-table :data="bookslist" size="medium" border style="width: 100%">
				<el-table-column prop="name" label="名称" width="250"></el-table-column>
			    <el-table-column prop="sn" label="编号"></el-table-column>
				<el-table-column prop="maker" label="品牌"></el-table-column>
				<el-table-column prop="tmake" label="日期"></el-table-column>
				<el-table-column prop="stock" label="库存"></el-table-column>
				<el-table-column label="图片">
					<template slot-scope="scope">
						<img :src="`${$ip}/api/public/showimg/${scope.row.pic}`"
							style="width: 50px;height: 50px;border-radius: 5px;">
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="go2update(scope.row.id)">
							修改
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background :page-size="page.lines" @current-change="move" :current-page="page.num"
				layout="prev,pager,next" :total="page.total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
export default {
	name:'UpdateGoos',
	data(){
		return{
			bookslist:[],
			page: {
				num: 1,
				lines: 6,
				total: 0
			},
			act:'修改'
		}
	},
	methods:{
		go2update(id){
			this.$router.push({path:'/admin/editgoos',query:{id:id,act:this.act}})
		},
		findPage() {
			this.$get("/api/adm/book/findByPage/" + this.page.num + "/" + this.page.lines).then((resp) => {
				this.bookslist = resp.data.data.books;
				this.page.total = resp.data.data.total;
				console.log(this.bookslist);
				console.log(this.page);
				this.bookslist.forEach((item)=>{
					let date =new Date(item.tmake);
					let year =date.getFullYear();
					let month =date.getMonth()+1;
					month = month < 10 ? '0' + month : month;
					item.tmake = `${year}-${month}`;
				})
			})
		},
		move(num) {
			this.page.num = num;
			this.findPage();
		},
	},
	mounted(){
		this.findPage();
	}
}
</script>

<style scoped>
a{
	color: white;
}
.goos{
	width: 78%;
	margin: 0 auto;
}
.goos .div1{
	margin-top: 15px;
}
.goos .div1 aside{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.goos .div1 aside span{
	margin-left: 8px;
}
.goos .div1 aside button{
	width: 80px;
	line-height: 40px;
	border: none;
	color: white;
	background-color: #009688;
	margin-right: 2vw;
	font-size: 18px;
}
.goos .div1 button{
	width: 150px;
	line-height: 40px;
	border: none;
	color: white;
	background-color: #009688;
}
.goos .div2{
	margin-top: 20px;
}
.goos .div2 .el-pagination{
	text-align: center;
	margin-top: 10px;
}
</style>
